import QtQuick
import QtQuick.Controls
import QtQuick.Controls.Basic
import QtQuick.Layouts
import Qt5Compat.GraphicalEffects

Rectangle {
    id: root
    color: "#f5f5f5"
    radius: 4
    
    property int spinBoxValue: spinBox.value

    ColumnLayout {
        id: layout
        anchors.fill: parent
        anchors.margins: 20
        spacing: 20

        Text {
            Layout.alignment: Qt.AlignHCenter
            text: "自定义样式SpinBox"
            font.bold: true
            font.pixelSize: 14
        }

        RowLayout {
            Layout.fillWidth: true
            Layout.alignment: Qt.AlignHCenter
            spacing: 10

            SpinBox {
                id: spinBox
                value: 50
                from: 0
                to: 100
                editable: true

                background: Rectangle {
                    implicitWidth: 140
                    implicitHeight: 40
                    radius: height / 2
                    color: spinBox.enabled ? (spinBox.up.pressed || spinBox.down.pressed ? "#e0e0e0" : "white") : "#f0f0f0"
                    border.color: spinBox.focus ? "#2196F3" : "#bdbdbd"
                    border.width: spinBox.focus ? 2 : 1
                    
                    // 添加阴影效果
                    layer.enabled: true
                    layer.effect: DropShadow {
                        transparentBorder: true
                        color: "#20000000"
                        radius: 4
                        samples: 8
                    }
                }

                up.indicator: Rectangle {
                    x: parent.width - width
                    height: parent.height
                    implicitWidth: 40
                    implicitHeight: 40
                    radius: height / 2
                    color: spinBox.up.pressed ? "#e0e0e0" : "transparent"

                    Text {
                        text: "+"
                        font.pixelSize: 20
                        color: spinBox.up.pressed ? "#1976D2" : "#757575"
                        anchors.centerIn: parent
                    }
                }

                down.indicator: Rectangle {
                    x: 0
                    height: parent.height
                    implicitWidth: 40
                    implicitHeight: 40
                    radius: height / 2
                    color: spinBox.down.pressed ? "#e0e0e0" : "transparent"

                    Text {
                        text: "-"
                        font.pixelSize: 20
                        color: spinBox.down.pressed ? "#1976D2" : "#757575"
                        anchors.centerIn: parent
                    }
                }

                contentItem: TextInput {
                    z: 2
                    text: spinBox.textFromValue(spinBox.value, spinBox.locale)
                    font.pixelSize: 14
                    color: "#212121"
                    selectionColor: "#2196F3"
                    selectedTextColor: "white"
                    horizontalAlignment: Qt.AlignHCenter
                    verticalAlignment: Qt.AlignVCenter
                    readOnly: !spinBox.editable
                    validator: spinBox.validator
                    inputMethodHints: Qt.ImhFormattedNumbersOnly
                }
            }

            // 值显示
            Rectangle {
                Layout.alignment: Qt.AlignVCenter
                color: "#2196F3"
                radius: 4
                width: valueText.width + 20
                height: valueText.height + 10

                Text {
                    id: valueText
                    anchors.centerIn: parent
                    text: spinBox.value
                    color: "white"
                    font.bold: true
                }
            }
        }

        Text {
            text: "说明：展示了如何完全自定义SpinBox的外观，包括圆角、阴影、动画效果等"
            font.pixelSize: 12
            color: "#666666"
            wrapMode: Text.WordWrap
            Layout.fillWidth: true
            Layout.fillHeight: true
        }
    }
} 
